import React,{PropTypes} from "react";

import classnames from 'classnames';

import {type} from '../../util/type';

import './style.css';

/**
 *  Button 组件
 *  参数 : 【
 *          type :
 *          htmlType :
 *          className :
 *          onClick
 *          disabled
 *         】
 */
class Button extends React.Component{

    static defaultProps = {
        disabled: false,
        prefixCls: 'fly-btn',
        type: 'button',
    };

    static propTypes = {
        className: PropTypes.string,
        type: PropTypes.string,
        htmlType:PropTypes.string,
        id: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.number,
        ]),
        size: PropTypes.oneOf(['small', 'default', 'big']),

        disabled: PropTypes.bool,

        onClick: PropTypes.func
    };

    constructor(props){
        super(props);
        this.state = {

        };
        this.handleClick = this.handleClick.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
    }

    componentWillMount(){
        const t = this.props.type,s = this.props.size;

        // 过滤type && size 类型
        this.type = this.typeFilter(t);
        this.size = this.sizeFilter(s);
    }

    // 按钮type类型过滤器
    typeFilter(t){
        let o = {primary:false,blank:false,danger:false};
        if(t == null){ o["primary"] = true; return o; }
        else if(typeof t !== "string"){ throw Error("fly in Button Error type is not a string") };
        switch(t) {
            case "primary":
                o["primary"] = true;
                break;
            case "blank":
                o["blank"] = true;
                break;
            case "danger":
                o["danger"] = true;
                break;
        }
        return o;
    }

    sizeFilter(size){

        let s = {small:false,big:false};

        if(size == null){  return s; };
        if(typeof size !== "string"){ throw Error("fly in Button Error size is not a string") };

        switch(size) {
            case "small":
                s["small"] = true;
                break;
            case "big":
                s["big"] = true;
                break;
        }
        return s;
    }

    // onClick 点击
    handleClick(e){
        // [逻辑1] disabled 不可点
        const dis = this.props.disabled,
            c = this.props.onClick;
        if(dis === true){ return; }
        if(typeof c === "function"){c(e)}
    }

    // 失去焦点 [针对于两个属性去删除active类]
    handleBlur(){}

    componentWillReceiveProps(p,s){
        // 动态整理type && size 类型
        this.type = this.typeFilter(p.type);
        this.size = this.sizeFilter(p.size);
    }

//asd
    render(){
        const {disabled,htmlType,className,style} = this.props,
            t = this.type,s = this.size;

        const props = this.props;

        const classNames = classnames({
            [`${props.prefixCls}`] : true,
            [`${props.prefixCls}-primary`]:props.type!=="button" ? t["primary"] :true ,
            [`${props.prefixCls}-blank`]:t["blank"],
            [`${props.prefixCls}-danger`]:t["danger"],
            [`${props.prefixCls}-sm`]:s["small"],
            [`${props.prefixCls}-lg`]:s["big"]
        },className);

        return(
            <button
                type={htmlType ? htmlType : "button"}
                className={classNames}
                    disabled={disabled ? true : false}
                    onClick={this.handleClick}
                    onBlur={this.handleBlur}
            >
                <span>{this.props.children}</span>
            </button>
        )
    }
}

module.exports = Button;